<template>
  <div class="shopListIndex">
       <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- Cart卡片视图 -->
<el-card class="box-card">
  <!-- 输入框 -->
  <div class="text item" :span="12">
    <el-row :gutter="20">
  <el-col :span="8">
    <!-- clearable	是否可清空	boolean	—	false
         clear	在点击由 clearable 属性生成的清空按钮时触发
    -->
    <el-input @change="OnChange" clearable @clear="empty" placeholder="请输入内容" v-model="paramData.query">
    <el-button @click="clickSearchBtn" slot="append" icon="el-icon-search"></el-button>
  </el-input>
  </el-col>
  <el-col :span="6">
    <el-button @click="addUsers" type="primary" :span="12">添加商品</el-button>
  </el-col>
</el-row>
  </div>
  <!-- 表格 -->
<el-table
    :data="shopListData"
    border
    stripe
    style="width: 100%">
     <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
     width="600"
      prop="goods_name"
      label="商品名称"
        >
    </el-table-column>
    <el-table-column
      prop="goods_price"
      label="商品价格(元)"
        >
    </el-table-column>
    <el-table-column
      prop="goods_weight"
      label="商品重量"
        >
    </el-table-column>
    <el-table-column
      prop="add_time"
      label="创建时间"
        >
    </el-table-column>
    <el-table-column
      label="操作"
      width="180px"
        >
        <template slot-scope="scope">
          <!-- <pre>
            {{scope.row}}
          </pre> -->
          <div class="tableBtn">
            <!-- 修改按钮 -->
            <el-button @click="amendUsers(scope.row.id)" type="primary" size="mini" icon="el-icon-edit"></el-button>
            <!-- 删除按钮 -->
            <el-button @click="deleteShop(scope.row.goods_id)" type="danger" size="mini" icon="el-icon-delete"></el-button>
          </div>
        </template>
    </el-table-column>
  </el-table>
   <!-- 分页 -->
  <div class="paging">
    <!--
    size-change	pageSize 改变时会触发	每页条数
    current-change	currentPage 改变时会触发	当前页
     current-page	当前页数，支持 .sync 修饰符	number	—	1
     page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
     layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
     total	总条目数	number	—	—
     -->
    <el-pagination
      @size-change="newSizeChange"
      @current-change="newCurrentChange"
      :current-page="paramData.pagenum"
      :page-sizes="[1, 2, 3, 5,10]"
      :page-size="paramData.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</el-card>

  </div>
</template>

<script>
import {getGoods,deleteGoodsId} from '@/api/shopManage'
export default {
  name:'shopListIndex',
data() {
  return {
 paramData:{
        query:'',//查询参数
        pagenum:1,//当前页码
        pagesize:2//每页显示条数
     },
     shopListData:[],//商品列表数据
     total:0,
  }
},
created(){
   this.listOfGoodsData()
},
  methods: {
    //  商品列表数据
    async listOfGoodsData(){
      let {data} = await getGoods(this.paramData);
      // console.log(data, '')
      this.shopListData = data.data.goods
      this.total = data.data.total;//总条数
    },
    // 清空输入框
  empty(){
    this.listOfGoodsData()
  },
    // enter键触发
    OnChange(){
      this.listOfGoodsData()
  },
  // 点击按钮搜索
  clickSearchBtn(){
this.listOfGoodsData()
  },
    // 每条数据触发
  newSizeChange(newPageSize){
     this.paramData.pagesize=newPageSize;
    //  重新请求数据
    this.listOfGoodsData()
  },
   // 每页数据触发
  newCurrentChange(newPageNum){
      this.paramData.pagenum=newPageNum;
      // 重新请求数据
       this.listOfGoodsData()
  },
  // 添加用户按钮
  addUsers(){

  },
  // 修改
  amendUsers(){

  },
  // 删除
  async deleteShop(goodsId){
    console.log(goodsId, '')
     const res = await this.$confirm('此操作将永久删除该该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
   console.log(res, '')
   if(res !== 'confirm' )return this.$message.info('用户取消删除')
      let {data} = await deleteGoodsId(goodsId)
      if(data.meta.status !==200)return this.$message.error(data.meta.msg)
      this.$message.success(data.meta.msg)
      this.listOfGoodsData()
  }
  },
}
</script>

<style lang="less" scoped>
 .shopListIndex{
   /deep/.el-table_1_column_6 {
     display: flex;
     flex-direction: row;
   }
   .paging{
     margin: 20px 0;
   }
 }
</style>
